<template>
  <div id="main" ref="main"></div>
</template>
<script>
import echarts from "echarts";
export default {
  mounted() {
    this.barChart();
  },
  methods: {
    barChart() {
      const myChart = echarts.init(this.$refs.main);
      const option = {
        title: {
          text: "故障设备占比",
          subtext: "时间：06月",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left",
          bottom: 0,
          icon: "circle",
          formatter: function(name) { // 显示省略号
            return name.length > 20 ? name.substr(0, 20) + "..." : name;
          }
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            startAngle: 180,
            label: {
              //饼图图形上的文本标签
              normal: {
                show: true,
                position: "inner", //标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 16 //文字的字体大小
                },
                formatter: "{d}%"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 50,
                name:
                  "平台聚隆科技付了定金立刻就放了快到家了开始放假快乐大街上来看福建烤老鼠大解放路口的解放路口",
                itemStyle: {
                  color: "green"
                }
              },
              {
                value: 50,
                name: "分光设备",
                itemStyle: {
                  color: "blue"
                }
              },
              {
                value: 100,
                name: "分流器",
                itemStyle: {
                  color: "#000"
                }
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
#main {
  width: 100%;
  height: 100%;
}
</style>